<template>
	<view class="recommend">
		<text style="font-size: 12px;">推荐歌曲</text>
		<view class="elaborate" style="font-size: 13px;">
			为你精心推荐
			<view class="more" @click="moreSheet">查看更多</view>
		</view>
		<view class="list">
			<view class="item" v-for="(item,index) in list" :key="index" @click="toSongSheet(item.id)">
				<image :src="pubUrl + item.musicListImg" class="cover"></image>
				<view class="title">{{item.musicListName}}</view>
			</view>
		</view>
	</view>
</template>

<script>
import { getMenuAll } from '@/api/song.js';
import {pubUrl} from '@/api/http.js'
export default {
	name: 'recommendSongSheet',
	data() {
		return {
			list:[],
			pubUrl:''
		};
	},
	methods: {
		//更多歌单
		moreSheet() {
			uni.navigateTo({
				url: '/pages/moreSongSheet/moreSongSheet'
			});
		},
		//获取歌单列表
		getMenuList() {
			getMenuAll().then(res => {
				console.log(res)
				this.list=res.data
			});
		},
		//跳转歌单详情列表
		toSongSheet(id) {
			uni.navigateTo({
				url: '/pages/songSheet/songSheet?id=' + id
			});
		},
	},
	created() {
		this.getMenuList();
		this.pubUrl=pubUrl
	}
};
</script>

<style lang="less">
.recommend {
	color: #8d8d8d;
	margin-left: 10px;
	margin-top: 10px;
	.elaborate {
		position: relative;
		color: #000;

		.more {
			position: absolute;
			right: 10px;
			top: 0;
			border-radius: 15px;
			border: solid #000 1px;
			font-size: 10px;
			padding: 3px;
		}
	}
	.list {
		display: flex;
		height: 140px;
		width: 100%;
		overflow-x: scroll;
		margin-top: 10px;
		.item {
			height: 120px;
			width: 100px;
			border-radius: 10px;
			flex-shrink: 0;
			margin-right: 10px;
			.cover {
				width: 100px;
				height: 100px;
				border-radius: 5px;
			}
			.title {
				font-size: 10px;
				color: #000;
			}
		}
	}
}
</style>
